<#import "inc/macro-page.html" as panel>
<#import "macro-filter-page-box.html" as seachpanel>
<#escape x as x?html>
<@panel.header "特殊岗位持证情况预警" "">
</@panel.header>
<@panel.body>
<!-- Bread crumb -->
<div class="row page-titles">
	<div class="col-md-5 align-self-center">
		<h3>特殊岗位持证情况预警</h3>
	</div>
	<div class="col-md-7 align-self-center">
		<div class="dropdown page-bar-drop-menu">
			<button class="btn btn-info dropdown-toggle clear-caret-down align-right" type="button" data-toggle="dropdown"><i class="fa fa-filter"></i></button>
			<div class="dropdown-menu filled-width">
				<@seachpanel.filterbox></@seachpanel.filterbox>
		</div>
	</div>
</div>
</div>
<!-- End Bread crumb -->
<!-- Container fluid  -->
<div class="container-fluid">
	<!-- Start Page Content -->
	<div class="row">
		<div class="col-lg-12">
			<div class="card">
				<div class="custom-card-header quick-bar m-b-20">
					<div class="hint">特定人员筛选</div>
					<button id="id-export-file" type="button" class="btn btn-dark btn-outline btn-sm" title="导出"><i class="fa fa-share-square-o"></i></button>
				</div>
				<div class="card-body">
					<!-- Nav tabs -->
					<ul class="nav nav-tabs" role="tablist">
						<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#id-tab-analysis" role="tab"><span class="hidden-xs-down">分析对比</span></a> </li>
						<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#id-tab-profile" role="tab"><span class="hidden-xs-down">具体数据</span></a> </li>
					</ul>
					<!-- Tab panes -->
					<div class="tab-content tabcontent-border">
						<div class="tab-pane active m-t-30" id="id-tab-analysis" role="tabpanel">
							<div id="id-diagram-group" class="m-t-30">
								<div id="nb-chart" style="height: 480px"></div>
								<table id="id-ratio-table" class="table table-bordered content-center m-t-30"  cellspacing="0" width="100%">
									<thead>
									<tr>
										<th>&nbsp;</th>
										<th>三种人:工作票签发人</th>
										<th class="stat-bad-bg">三种人:工作负责人</th>
										<th>三种人:工作许可人</th>
										<th>停送电</th>
										<th class="stat-bad-bg">带电作业</th>
									</tr>
									</thead>
								</table>
								<div id="id-clone-area"></div>
							</div>
						</div>
						<div class="tab-pane" id="id-tab-profile" role="tabpanel">
							<div class="row m-t-15">
								<div class="col-lg-12">
									<div class="card">
										<h4 class="card-title">持证人员</h4>
										<table id="id-owner-table" class="table table-bordered content-center m-t-10"  cellspacing="0">
											<thead>
											<tr>
												<th>ERP编号</th>
												<th>单位</th>
												<th>部门</th>
												<th>班组</th>
												<th>姓名</th>
												<th>证书</th>
											</tr>
											</thead>
										</table>
									</div>
								</div>
								<div class="col-lg-12">
									<div class="card">
										<h4 class="card-title">未持证人员</h4>
										<table id="id-unowner-table" class="table table-bordered content-center m-t-10"  cellspacing="0">
											<thead>
											<tr>
												<th>ERP编号</th>
												<th>单位</th>
												<th>部门</th>
												<th>班组</th>
												<th>姓名</th>
												<th>证书</th>
											</tr>
											</thead>
										</table>
									</div>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- End PAge Content -->
</div>
<!-- End Container fluid  -->
</@panel.body>
<@panel.footer>
<script type="text/javascript" src="${ROOT}/mind/js/plugins/alangyun-filterbox.js"></script>
<script type="text/javascript" src="${ROOT}/mind/js/lib/datatables/datatables.min.js"></script>
<script type="text/javascript" src="${ROOT}/mind/js/lib/datatables/jquery.dataTables.zh-CN.js"></script>
<script type="text/javascript" src="${ROOT}/mind/js/lib/echart/echarts.min.5.4.0.js"></script>
<script type="text/javascript">
	// word导出事件
	document.getElementById('id-export-file').addEventListener('click', function() {
		// 确保图表完全渲染
		setTimeout(() => {
			// 获取 ECharts 实例
			var myChart = echarts.getInstanceByDom(document.getElementById('nb-chart'));

			// 使用 getDataURL 方法导出图表为图片
			var dataURL = myChart.getDataURL({
				type: 'png', // 图片格式，支持：png、jpeg
				pixelRatio: 2, // 导出的图片分辨率比例，默认是 1
				backgroundColor: '#fff' // 图表的背景色
			});

			// 将图片插入到导出内容中
			var imgTag = '<img src="' + dataURL + '" width="500" />';

			// 创建导出容器
			var exportContainer = document.createElement('div');
			exportContainer.id = 'export-container';
			exportContainer.style.width = '100%';

			// 清空导出容器的内容
			while (exportContainer.firstChild) {
				exportContainer.removeChild(exportContainer.firstChild);
			}

			// 克隆表格内容
			var clonedTabless = document.getElementById('id-ratio-table').cloneNode(true);
			var clonedTable = document.getElementById('id-owner-table').cloneNode(true);
			var clonedTables = document.getElementById('id-unowner-table').cloneNode(true);

			// 为表格添加间隙样式
			clonedTabless.style.marginBottom = '20px';
			clonedTable.style.marginBottom = '20px';
			clonedTables.style.marginBottom = '20px';

			// 将图表和表格添加到导出容器
			exportContainer.innerHTML = imgTag;
			// exportContainer.appendChild(clonedTabless);
			// exportContainer.appendChild(clonedTable);
			// exportContainer.appendChild(clonedTables);

			// 转换为 Word 文档
			var htmlHeader = `
          <!DOCTYPE html>
          <html>
          <head>
            <style>
               table, th, td {
                   border: 1px solid #000;
                   text-align: center;
                   border-collapse: collapse;
               }
               .stat-bad-bg {color: #fff; background: #ef5350;}
            </style>
          </head>
          <body>`;
			var htmlFooter = `
          </body>
          </html>`;
			var htmlContent = htmlHeader +
					exportContainer.innerHTML +
					'<br><br><br>' + // 添加空行
					clonedTabless.outerHTML +
					'<br><br><br>' + // 添加空行
					clonedTable.outerHTML +
					'<br><br><br>' + // 添加空行
					clonedTables.outerHTML +
					htmlFooter;


			// 创建 Blob 并导出
			var blob = new Blob([htmlContent], { type: 'application/msword' });
			var url = URL.createObjectURL(blob);
			var a = document.createElement('a');
			a.href = url;
			a.download = '特殊岗位持证情况预警.doc';
			a.click();
			URL.revokeObjectURL(url);

			// 清理临时容器
			exportContainer.remove();
		}, 1000); // 调整延迟时间以确保图表渲染完成
	});


	$(document).ready(function(){

		var myChart = echarts.init(document.getElementById('nb-chart'), null, {
			renderer: 'canvas',
			useDirtyRect: false
		});

		var convertToChart = function(mydata){
			if(!mydata.sums || mydata.sums.length==0)
				return;

			var legends=["持证比例","未持证比例"];
			//var yData = ['三种人：工作票签发人', '三种人：工作负责人','三种人：工作许可人',  '停送电', '带电作业'];
			//var czData = [80,70,80,90,78];
			// var wczData =[20,30,20,10,22];

			var yData=[];
			var czData=[];
			var wczData=[];
			mydata.sums.forEach(item=>{
				yData.push(item.name);
				var cz = Math.floor(item.own * 100.0 / item.total);
				czData.push(cz);
				wczData.push(100-cz);
			});


			var option = {
				color: ['#4caf50','#ffa206'],
				tooltip: {
					show: false
				},
				legend: {
					data: legends
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				yAxis: [
					{
						type: 'category',
						data: yData
					}
				],
				xAxis: [
					{
						type: 'value',
						axisLabel:{
							formatter: function(value){
								return value+"%";
							}
						}
					}
				],
				series: [
					{
						name: "持证比例",
						type: 'bar',
						stack: 'Ad',
						emphasis: {
							focus: 'series'
						},
						data: czData,
						label: {
							formatter: function(param){
								return param.value +"%";
							}
						}
					},
					{
						name: "未持证比例",
						type: 'bar',
						stack: 'Ad',
						emphasis: {
							focus: 'series'
						},
						data: wczData
					}
				]
			};

			if (option && typeof option === 'object') {
				myChart.setOption(option);
			}

			window.addEventListener('resize', myChart.resize);
		}
		//比例表绑定
		var $percentTable = null;
		var dataToRatioTableView = function(mydata){
			if(!mydata.sums || mydata.sums.length==0)
				return;

			var czData = {
				name: '持证比例',
				tsd: '',
				qfr: '',
				fzr: '',
				xkr: '',
				dzy: ''
			}
			var wczData = {
				name: '未持证比例',
				tsd: '',
				qfr: '',
				fzr: '',
				xkr: '',
				dzy: ''
			}
			mydata.sums.forEach(item => {
				var val = Math.floor(item.own * 100 / item.total);

				if(item.name==='带电作业') {
					czData.dzy = val +"%";
					wczData.dzy =  (100-val) +"%";
				}else if(item.name==='停送电'){
					czData.tsd = val +"%";
					wczData.tsd =  (100-val) +"%";
				}else if(item.name==='三种人：工作许可人'){
					czData.xkr = val +"%";
					wczData.xkr =  (100-val) +"%";
				}else if(item.name==='三种人：工作负责人'){
					czData.fzr = val +"%";
					wczData.fzr =  (100-val) +"%";
				}else if(item.name==='三种人：工作票签发人'){
					czData.qfr = val +"%";
					wczData.qfr =  (100-val) +"%";
				}
			});

			if($percentTable) {
				$percentTable.fnClearTable();
				$percentTable.fnDestroy();
			}

			$percentTable = $("#id-ratio-table").dataTable({
				"ordering":false,
				"searching": false,
				"bFilter":false,
				"info": false,
				"paging": false,
				'bAutoWidth':false,
				"bDestroy" : true,
				"aoColumns": [
					{'mData': 'name', sWidth: '100px', defaultContent: '' },
					{'mData': 'qfr', sWidth: '100px', defaultContent: '' },
					{'mData': 'fzr', sWidth: '100px', defaultContent: '' },
					{'mData': 'xkr', sWidth: '100px', defaultContent: '' },
					{'mData': 'tsd', sWidth: '100px', defaultContent: '' },
					{'mData': 'dzy', sWidth: '100px', defaultContent: '' }
				],
				"data":[czData, wczData]
			});
			$percentTable.fnDraw();
		};
		//持证人员表
		var $czTable = null;
		var dataToCZTableView = function(mydata){
			if(!mydata.owners || mydata.owners.length==0)
				return;

			if($czTable) {
				$czTable.fnClearTable();
				$czTable.fnDestroy();
			}

			$czTable = $("#id-owner-table").dataTable({
				"ordering":false,
				"searching": false,
				"bFilter":false,
				"info": false,
				"paging": false,
				'bAutoWidth':false,
				"bDestroy" : true,
				"aoColumns": [
					{'mData': 'id', sWidth: '100px', defaultContent: '' },
					{'mData': 'unit', sWidth: '100px', defaultContent: '' },
					{'mData': 'depart', sWidth: '100px', defaultContent: '' },
					{'mData': 'group', sWidth: '100px', defaultContent: '' },
					{'mData': 'name', sWidth: '100px', defaultContent: '' },
					{'mData': 'cert', sWidth: '100px', defaultContent: '' }
				],
				"data":mydata.owners
			});
			$czTable.fnDraw();
		};
		//未持证人员表
		var $wczTable = null;
		var dataToWCZTableView = function(mydata){
			if(!mydata.unowners || mydata.unowners.length==0)
				return;

			if($wczTable) {
				$wczTable.fnClearTable();
				$wczTable.fnDestroy();
			}

			$wczTable = $("#id-unowner-table").dataTable({
				"ordering":false,
				"searching": false,
				"bFilter":false,
				"info": false,
				"paging": false,
				'bAutoWidth':false,
				"bDestroy" : true,
				"aoColumns": [
					{'mData': 'id', sWidth: '100px', defaultContent: '' },
					{'mData': 'unit', sWidth: '100px', defaultContent: '' },
					{'mData': 'depart', sWidth: '100px', defaultContent: '' },
					{'mData': 'group', sWidth: '100px', defaultContent: '' },
					{'mData': 'name', sWidth: '100px', defaultContent: '' },
					{'mData': 'cert', sWidth: '100px', defaultContent: '' }
				],
				"data":mydata.unowners
			});
			$wczTable.fnDraw();
		};

		// 导出事件绑定
		// $('#id-export-file').click(function(){
		// 	$('.nav-tabs .nav-item a[href="#id-tab-analysis"]').tab("show");
		// 	var clone1 = $('#id-owner-table').clone(true);
		// 	var clone2 = $('#id-unowner-table').clone(true);
		// 	$('#id-clone-area').append(clone1);
		// 	$('#id-clone-area').append(clone2);
		//
		// 	var pdfCanvas = $.fn.pdfcanvas({
		// 		title: '特殊岗位持证情况预警',
		// 		direct: 'p',
		// 		keywords: '单位和部门：；岗位类别：',
		// 		afterPrint: function(){
		// 			$('#id-clone-area').html("");
		// 		}
		// 	})
		// 	pdfCanvas.addDom(document.getElementById("id-diagram-group"));
		// 	pdfCanvas.print();
		//
		// });

		//初始化过滤面板
		$.post('${ROOT}/w/treeNav',function(data, status){
			if(data.code==="ok"){
				$.fn.filterBox({
					data: data.data,
					onsubmit: function(form, data){
						console.log("log")
					}
				})
			}
		});
		//初始提取数据
		$.post('${ROOT}/w/sumSpec',function(data, status){
			if(data.code==="ok"){
				convertToChart(data.data);
				dataToRatioTableView(data.data);
				dataToWCZTableView(data.data);
				dataToCZTableView(data.data);
			}
		});
	});
</script>
</@panel.footer>
</#escape>